<template>
  <a-card style="width: 100%">
    <a-upload-dragger v-model:fileList="fileList" name="file" :multiple="true" @change="handleChange" @drop="handleDrop"
      :customRequest="setfile"  :showUploadList="false">
      <p class="ant-upload-drag-icon">
        <!-- <inbox-outlined></inbox-outlined> -->
      </p>
      <p class="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
      <p class="ant-upload-hint">文件将上传到OSS,如未配置请先配置</p>
    </a-upload-dragger>
  </a-card>
  <br />
  <a-card style="width: 100%">
    <!-- 搜索 -->
    <a-form name="customized_form_controls" layout="inline" :model="values" @finish="onFinish"
      style="margin: 30px 0; background: #fff" expandFixed="true">
      <!-- 文件名称输入框 -->
      <a-form-item name="price" label="文件名称">
        <a-input v-model:value="values.title" placeholder="请输入标题" />
      </a-form-item>
      <!-- 文件类型输入框 -->
      <a-form-item name="price" label="文件类型">
        <a-input v-model:value="values.types" placeholder="请输入标题" />
      </a-form-item>
      <a-form-item expandFixed="right">
        <a-button type="primary" html-type="submit">搜索</a-button>
        <a-button @click="() => toset()">重置</a-button>
      </a-form-item>
    </a-form>
  </a-card>
  <br />
  <a-card style="width: 100%">
    <div class="imgs_box">
      <div v-for="(item, ind) in fileLists" :key="ind">
        <img :src="item.url" alt="">
       <div>
        <p style="font-weight: bold;">{{ item.originalname }}</p>
        <p style="font-size: 12px;">上传于：{{item.createAt}}</p>
       </div>
      </div>
    </div>
  </a-card>
  <a-card style="width: 100%">
    <a-pagination v-model:current="current" v-model:page-size="pageSize" :total="totals" :page-size-options="pageSizeOptions"
      show-size-changer @showSizeChange="onShowSizeChange" @change="pageChage" />
  </a-card>
</template>

<script setup lang="ts">
import { reactive, computed, ref } from "vue"
//引入 pinia 
import { storeToRefs } from "pinia";
import { useFiles } from "../../store/files"

const ufiles = useFiles();
let { fileLists ,totals} = storeToRefs(ufiles)

let current = ref(1);
let pageSize = ref(8);
const pageSizeOptions = ref<string[]>(['8', '12', '16', '20', '24']);
//初始化页面数据
localStorage.removeItem("searchobj")
let flag = false;
//文件数据
let fileitem = {}
//初始化获取数据
ufiles.getsearchfiles({ page: current.value, pageSize: pageSize.value })
//切换分页条数
const onShowSizeChange = (currents: number, pageSizes: number) => {
  console.log(currents, pageSizes, "页码，条数");
  current.value = 1
  pageSize.value = pageSizes;
};
//切换页数
const pageChage = (page: number, pageSize: number) => {
  current.value = page;
  flag = false;
  console.log(page,"page")
  search()
}

const handleChange = async (info: any) => {
  console.log(info.file.originFileObj,"info")
  ufiles.uploadfile(info.file.originFileObj)

};
let fileList = ref([]),
  handleDrop = (e: DragEvent) => {
    console.log(e);
  };
//自定义上传啊
const setfile = (v: any) => {
  // console.log(v, "set file")
  let obj = {...v}.file
  fileitem = obj 
}
//定义搜索框的初始数据
const values = reactive({
  title: "",
  types: ""
});
//重置
const toset = () => {
  location.reload()
}

//点击搜索获取表单数据
const onFinish = () => {
  //点击模糊搜索
  console.log(values, "values")
  flag = true;
  search()
}
//封装一个模糊搜索的方法
const search = () =>{
  let obj = {};
  if(flag){
    current.value = 1,
    pageSize.value = 12
    obj = {
      page:current.value,
      pageSize:pageSize.value
    }
  }else{
    obj = JSON.parse(localStorage.getItem("searchobj")||"{}")
    obj = {
      ...obj,
      page:current.value,
      pageSize:pageSize.value
    }
  }
  if(values.title!= ""){
    obj = {...obj,originalname:values.title}
  }
  if(values.types!=""){
    obj = {...obj,type:values.types}
  }

  ufiles.getsearchfiles(obj)

}

</script>

<style lang="scss">
.imgs_box{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  >div{
    width: 25%;
    height: 160px;
    padding: 10px;
    .ant-image{
      width: 100%;
      height: 60%;
      >img{
      width: 100%;
      height: 100px;
      display: block;
    }
    }
    
    p{
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }
  }
}
</style>
<!-- // //上传 阿里云
// const client = new OSS({
//   // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
//   region: "oss-cn-shanghai",
//   // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
//   accessKeyId: "LTAI5tKSdYvv9fT7SuqkVvch",
//   accessKeySecret: "pTHzcC3QSYgNA4J5BP1v3tpKiszOdA",
//   // 填写Bucket名称。
//   bucket: "zhaozheng123",
// }); -->
<!-- 
import OSS from "ali-oss";
import { ref } from "vue";
import { Empty } from "ant-design-vue";
import { InboxOutlined } from "@ant-design/icons-vue";

// 绑定搜索框
const value = ref<string>("");
// 定义图片数组
const fileList = ref([]);
// 设置图片
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
// 图片类型
interface FileItem {
  uid: string;
  name?: string;
  status?: string;
  response?: string;
  url?: string;
}
// 图片类型
interface FileInfo {
  file: FileItem;
  fileList: FileItem[];
}
const client = new OSS({
  // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
  region: "oss-cn-shanghai",
  // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
  accessKeyId: "LTAI5tQ8J7DjsBHnMunpkkPK",
  accessKeySecret: "a8VOQH2FzsOrf90P7ZAhEo7QaoG8bW",
  // 填写Bucket名称。
  bucket: "baaweikaifang",
});
const setFile = () => {
  console.log("333");
};
// 上传信息
const handleChange = async (info: FileInfo) => {
  const res = await client.put(
    info.file.name as string,
    info.file.originFileObj
  );
  // console.log(info.file);
  console.log(res);
}; -->